import React, { Component } from 'react';
import { fileurl } from '../../services/baseurl'
import { countLearnTime, coursewareTime, countLearnNum } from '../../services/learnStudent'
import { checkHost } from '@/utils/utils'
import { history } from 'umi'
import { Modal } from 'antd'
import { PDF, Viewer } from "@/components/PDF";
import styles from './index.less'
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
let timer: any = null;
let timer2: any = null;
const host = window.location.host
export default class Index extends Component<any, any> {
    constructor(props: any) {
        super(props);
        const userinfo = JSON.parse(localStorage.getItem('userinfo') || '{}');
        const openid = userinfo.openid;
        const hasTwo:any = localStorage.getItem('hasTwo')||2;
        if (checkHost() && userinfo.type === 2&&hasTwo!=1) {
            if (!openid) {
                Modal.confirm({
                    title: <p style={{ fontSize: 20, marginTop: -3 }}>操作提醒</p>,
                    content: <p style={{ fontSize: 18 }}>新用户请绑定您的微信账号解锁培训练习权限，绑定成功后每次登录平台请使用微信进行扫码登录即可。</p>,
                    okText: '去绑定',
                    style: { fontSize: 30, color: "#f60" },
                    onOk: () => {
                        location.href = `/index/index/login_weixin`;
                    },
                });
                history.goBack();
            }
        }

        this.state = {
            time: 0,
            containerWidth: 100

        }
    }
    componentDidMount() {
        document.oncontextmenu = function () {
            return false;
        }

        const uid = localStorage.getItem('id') || '';
        const cid = this.props.match.params.id;
        let a = 0;
        timer = setInterval(() => {
            a = a + 5
            if (a >= 60) {
                clearInterval(timer)
                return;
            }
            countLearnTime({ uid })
            coursewareTime({ uid, cid })
        }, 300000)
        timer2 = setTimeout(() => {
            countLearnNum({ uid })
        }, 300000)
    }
    componentWillUnmount() {
        clearInterval(timer)
        clearTimeout(timer2)
    }
    scalUp = () => {
        const { containerWidth } = this.state;
        if (containerWidth >= 200) return;
        this.setState({
            containerWidth: containerWidth + 10
        })
    }
    scalDown = () => {
        const { containerWidth } = this.state;
        if (containerWidth <= 10) return;
        this.setState({
            containerWidth: containerWidth - 10
        })
    }
    reset = () => {
        this.setState({
            containerWidth: 100
        })
    }
    render() {
        const cover = {
            width: 200,
            height: 45,
            position: 'absolute',
            right: 17,
            top: 0,
            cursor: 'no-drop'
        }
        const doc = localStorage.getItem('doc');
        const id = Number(this.props.match.params.id);
        const is_jc = Number(this.props.match.params.is_jc);
        const { containerWidth } = this.state;
        return (
            <React.Fragment>
                {doc && doc.indexOf(".pdf") !== -1 &&
                    <div className={styles['pdf-header']}>
                        <div onClick={this.scalUp}><PlusOutlined /></div>
                        <div className={styles.scale} onClick={this.reset}>{containerWidth}%</div>
                        <div onClick={this.scalDown}><MinusOutlined /></div>
                    </div>
                }
                {doc && doc.indexOf(".ppt") !== -1 &&
                    <div className={styles['ppt-header']}>
                    </div>
                }
                {doc && doc.indexOf(".pdf") !== -1 && <div style={{ width: '100%', position: 'relative', height: '70vh', overflow: 'auto' }}>
                    <div className={styles.container} style={{ width: containerWidth + '%' }}>
                        {
                            doc && doc.indexOf(".ppt") !== -1 &&
                            <iframe style={{ width: '100%', height: '70vh' }} src={`https://view.officeapps.live.com/op/view.aspx?src=${fileurl(is_jc) + doc}`} frameBorder="0"></iframe>
                        }
                        {doc && doc.indexOf(".pdf") !== -1 && (
                            <PDF src={fileurl(is_jc)+ doc}>
                                <Viewer />
                            </PDF>
                        )}

                    </div >

                </div>
                }
                {doc && doc.indexOf(".mp4") !== -1 && (
                    <video
                        style={{ width: "100%" }}
                        controls
                        autoPlay
                        src={fileurl(is_jc) + doc}
                    ></video>
                )}
            </React.Fragment>

        )
    }
}
